<template>
  <div class="Login">
    <van-nav-bar
      title="登录"
      left-text="返回"
      right-text="注册"
      left-arrow
      @click-left="$router.back()"
      @click-right="$router.push('/register')"
    />
    <div class="content">
      <div class="img">
        <img src="@/assets/images/logo.jpg" alt="" style="width: 100%" />
      </div>
      <div class="form">
        <!-- <p>用户名：<input type="text" v-model="user.userid" /></p>
      <p>密码：<input type="password" v-model="user.pwd" /></p> -->
        <!-- <p><input type="button" value="登录" @click="login" /></p> -->
        <!-- <van-button type="primary" size="large" @click="login">登录</van-button>
      <p><router-link to="/register">去注册</router-link></p> -->
        <van-form @submit="lgin">
          <van-cell-group inset style="height: 3rem">
            <van-field
              v-model="user.userid"
              name="用户名"
              label="用户名"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
              v-model="user.pwd"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
          </van-cell-group>
          <div style="margin: 16px" @click="beforeLogin">
            <van-button
              round
              block
              type="primary"
              :disabled="canLogin"
              native-type="submit"
            >
              提交
            </van-button>
          </div>
        </van-form>
        <div class="isSure">
          <input type="checkbox" v-model="isSure" id="ck" /><label for="ck"
            >同意条款</label
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "@/api/User.js";
import { Toast,Notify } from "vant";
export default {
  data() {
    return {
      user: {
        fmdo: "login",
        dopost: "login",
        userid: "",
        pwd: "",
      },
      isSure: false,
    };
  },
  computed: {
    canLogin() {
      if (this.user.userid !== "" && this.user.pwd !== "" && this.isSure) {
        return false;
      } else {
        return true;
      }
    },
  },

  methods: {
    beforeLogin() {
      if (!this.isSure) {
        Toast("请先阅读用户条款");
      }
    },
    lgin() {
      if (!this.canLogin) {
        login(this.user, { loading: { message: "正在登录中...." } })
          .then((res) => {
            // console.log(res.data);
            if (res.data.status) {
              //存入sesion用来判断是否登录
              Notify({
                type: "success",
                message: res.data.msg,
              });
              sessionStorage.setItem("islog", true);
              this.$store.dispatch("user/getUser");
              
              var redirect = this.$route.query.redirect || "/";
              console.log(this.$route);
              this.$router.push(redirect);
            } else {
              alert(res.data.msg);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
  },
};
</script>

<style scoped>
.Login .content {
  padding-top: 0.5rem;
}
.content .img {
  width: 1.9rem;
  height: 1.9rem;
  margin: 0.4rem auto;
}
.content .isSure {
  padding: 0.2rem 0.4rem;
  text-align: center;
}
</style>
